<template>
  <view class="team">
    <u-navbar
      title="分销订单"
      style="position: fixed; z-index: 999"
      :border-bottom="false"
    ></u-navbar>
    <view class="team_box">
      <image :src="BaseUrl + '/static/common/td_bg.png'" mode="scaleToFill" />
      <view class="team_content">
        <view class="card left_box">
          <view class="top_box">
            <view class="title"> 团队订单数量（单） </view>
            <view class="num"> {{ dataObj.orderconut_all || 0 }} </view>
          </view>
          <view class="bottom">
            <view class="left">
              <view class="subT">一级订单</view>
              <view class="num"> {{ dataObj.orderconut1 || 0 }} </view>
            </view>
            <view class="right">
              <view class="subT">二级订单</view>
              <view class="num"> {{ dataObj.orderconut2 || 0 }} </view>
            </view>
          </view>
        </view>
        <view class="card right_box">
          <view class="top_box">
            <view class="title"> 团队订单金额（元） </view>
            <view class="num"> {{ dataObj.ordermoney_all || 0 }} </view>
          </view>
          <view class="bottom">
            <view class="left">
              <view class="subT">一级订单</view>
              <view class="num"> {{ dataObj.ordermoney1 || 0 }} </view>
            </view>
            <view class="right">
              <view class="subT">二级订单</view>
              <view class="num"> {{ dataObj.ordermoney2 || 0 }} </view>
            </view>
          </view>
        </view>
        <view class="card b_l_box">
          <view class="title">自购分销订单数量（单）</view>
          <view class="num"> {{ dataObj.orderconut || 0 }} </view>
        </view>
        <view class="card b_r_box">
          <view class="title">自购分销订单金额（元）</view>
          <view class="num"> {{ dataObj.ordermoney || 0 }} </view>
        </view>
        <view class="list_box">
          <view>
            <u-tabs
              ref="uTabs"
              :list="list"
              :current="current"
              active-color="#057748"
              bg-color="#f6f6f6"
              @change="tabsChange"
              :is-scroll="false"
            ></u-tabs>
          </view>
          <swiper :current="current" @change="changeSwiper">
            <swiper-item
              class="swiper-item"
              v-for="(item, index) in list"
              :key="index"
            >
              <scroll-view
                scroll-y
                style="width: 100%"
                @scrolltolower="onreachBottom"
                lower-threshold="50"
              >
                <view
                  class="item card"
                  style="margin-bottom: 20rpx"
                  v-for="(item, index) in orderL"
                  :key="index"
                >
                  <view class="top">
                    <view class="code">
                      <text>订单编号：</text>
                      <text>{{ item.order_no }}</text>
                    </view>
                    <view class="state" :class="fid(item.state) ? 'su' : 'df'">
                      {{ fix(item.state) }}
                    </view>
                    <!-- <view class="state" v-else>已取消</view> -->
                  </view>
                  <view class="sub_top">
                    <view class="left">
                      <text style="color: #888"> 下单人： </text>
                      <image
                        :src="BaseUrl + item.user.avatar"
                        mode="scaleToFill"
                      />
                      <text class="name" style="color: #333">
                        {{ item.user.username }}
                      </text>
                    </view>
                    <view class="right">
                      <text style="color: #888">{{
                        item.createtime_text
                      }}</text>
                    </view>
                  </view>
                  <view class="bottom">
                    <view class="center">
                      <view style="width: 180rpx; height: 180rpx">
                        <image
                          :src="BaseUrl + item.ordergoods[0].image"
                          mode="scaleToFill"
                        />
                      </view>
                      <view style="margin-left: 20rpx; flex: 1">
                        <view class="center-info">
                          <view
                            style="padding-right: 20rpx; box-sizing: border-box"
                          >
                            <view class="title">{{
                              item.ordergoods[0].title
                            }}</view>
                            <view class="sub">{{
                              item.ordergoods[0].difference
                            }}</view>
                          </view>
                          <view>
                            <view class="price"
                              >¥{{ item.ordergoods[0].price }}</view
                            >
                            <view class="num"
                              >x{{ item.ordergoods[0].number }}</view
                            >
                          </view>
                        </view>
                        <view
                          style="
                            display: flex;
                            justify-content: space-between;
                            padding-top: 20rpx;
                            box-sizing: border-box;
                          "
                        >
                          <view class="yongjin">
                            佣金：<text style="color: #eb622a"
                              >￥{{ yongjin(item) }}</text
                            >
                          </view>
                          <text
                            v-if="item.state == 2 || item.state == 3"
                            class="su"
                          >
                            待计入
                          </text>
                          <text
                            v-if="item.state == 4 || item.state == 6"
                            class="su"
                          >
                            已计入
                          </text>
                          <text
                            v-if="
                              item.state !== 2 &&
                              item.state !== 3 &&
                              item.state !== 4 &&
                              item.state !== 6
                            "
                            class="df"
                          >
                            已取消
                          </text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <u-loadmore :status="status" />
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";

export default {
  data() {
    return {
      BaseUrl: BaseUrl,
      list: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "待计入",
        },
        {
          id: 2,
          name: "已计入",
        },
        {
          id: 3,
          name: "已取消",
        },
      ],
      current: 0,
      status: "nomore",
      orderL: [],
      dataObj: {},
    };
  },

  onShow() {
    this.getData();
  },

  methods: {
    fid(status) {
      switch (status) {
        case 1:
          return true;
        case 2:
          return true;
        case 3:
          return true;
        case 4:
          return true;
        case 5:
          return true;
        case 6:
          return true;
        case 7:
          return false;
      }
    },
    fix(status) {
      switch (status) {
        case 1:
          return "待支付";
        case 2:
          return "待发货";
        case 3:
          return "待收货";
        case 4:
          return "待评价";
        case 5:
          return "";
        case 6:
          return "已完成";
        case 7:
          return "已取消";
      }
    },
    // 获取数据
    async getData() {
      await this.$request
        .get("api/wanlshop.partner/orderlist?type=" + this.current)
        .then((res) => {
          this.orderL = res.data.data.data;
          this.orderInfo = res.data.data;
          this.dataObj = res.data;
          console.log(this.orderInfo, "订单列表");
        });
    },
    tabsChange(index) {
      this.current = index;
      this.getData();
    },
    changeSwiper(e) {
      this.current = e.detail.current;
      this.getData();
    },
    onreachBottom() {
      console.log(111);
      this.status = "loading";
      setTimeout(() => {
        this.status = "loadmore";
      }, 2000);
    },
    yongjin(item) {
      if (item.pay.referrer_id == uni.getStorageSync("userInfo").id) {
        return item.pay.commission2;
      } else if (
        item.pay.interposition_id == uni.getStorageSync("userInfo").id
      ) {
        return item.pay.commission3;
      } else if (item.pay.user_id == uni.getStorageSync("userInfo").id) {
        return item.pay.commission1;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
swiper {
  width: 100%;
  height: 55vh;
}
.swiper-item {
  overflow: auto;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.team {
  .team_box {
    width: 100%;
    height: 34vh;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }
    .team_content {
      position: absolute;
      top: 200rpx;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      .card {
        background: white;
        border-radius: 16rpx;
        padding: 24rpx;
      }
      .left_box,
      .right_box {
        width: calc(50% - 20rpx);
        margin: 0 10rpx;
        .top_box {
          .title {
            font-size: 26rpx;
            color: #888888;
          }
          .num {
            font-size: 42rpx;
            color: #057748;
            line-height: 1.5em;
            font-weight: bold;
          }
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          .subT {
            font-size: 26rpx;
            color: #888888;
          }
          .num {
            font-size: 32rpx;
            color: #057748;
            line-height: 1.8em;
            font-weight: bold;
          }
        }
      }
      .b_l_box,
      .b_r_box {
        width: 100%;
        margin: 10rpx 10rpx 0 10rpx;
        width: calc(50% - 20rpx);
        .title {
          font-size: 26rpx;
          color: #888888;
        }
        .num {
          font-size: 42rpx;
          color: #057748;
          line-height: 1.5em;
          font-weight: bold;
        }
      }
      .list_box {
        width: 100%;
      }
    }
  }
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  .left {
    display: flex;
    align-items: center;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
}
.center {
  display: flex;
  image {
    width: 100%;
    height: 100%;
  }
  .center-info {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 32rpx;
      line-height: 1.4em;
    }
    .sub {
      font-size: 26rpx;
      opacity: 0.5;
      margin-top: 20rpx;
    }
    .price {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 1.4em;
    }
    .num {
      font-size: 26rpx;
      opacity: 0.5;
      margin-top: 20rpx;
      text-align: right;
    }
  }
}
.su {
  color: #077849;
}
.df {
  color: #888;
}
</style>